<%namespace name="admin" module="django.contrib.admin.templatetags.adminmedia" />
<%namespace name="base" file="../base.html" />
<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="${admin_media_prefix()}css/forms.css">
        <link rel="stylesheet" type="text/css" href="${admin_media_prefix()}css/base.css">
        <link rel="stylesheet" type="text/css" href="${base.url('/static/css/variation.css')}">
        <style text="text/css">
            <%include file="entry.css" />
        </style>
    
        <% 
            from registry.settings import CSRF_COOKIE_NAME
        %>    
        <script type="text/javascript">
            CSRF_COOKIE_NAME = "${ CSRF_COOKIE_NAME }";
        </script>

        <script type="text/javascript" src="${base.url('/static/js/xhr.js')}"></script>
        
        <script type="text/javascript">
            <%include file="entry.js" />
        </script>
    </head>
    <body>
        <h1>Enter genetic variation</h1>

        <form id="variation-entry-form">
            <!-- We should probably do something with genes here. -->

            <fieldset class="module aligned">
                <div class="form-row">
                    <label for="sequence-type">Sequence type:</label>
                    <select id="sequence-type">
                        <option value="g">Genomic</option>
                        <option value="c">Coding DNA</option>
                        <option value="r">RNA</option>
                        <option value="m">Mitochondrial DNA</option>
                        <!-- TODO: Protein. -->
                    </select>
                </div>

                <div class="form-row">
                    <label for="mutation-type">Mutation type:</label>
                    <select id="mutation-type">
                        <option value="substitution">Substitution (point mutation)</option>
                        <option value="deletion">Deletion</option>
                        <option value="insertion">Insertion</option>
                        <option value="duplication">Duplication</option>
                        <option value="indel">Insertion/Deletion</option>
                        <option value="inversion">Inversion</option>
                        <!--
                        Not implemented from Mutalyzer: frame shift; micro
                        satellite.
                        -->
                    </select>
                </div>

                <div class="form-row">
                    <label for="range-start">Range:</label>
                    <input type="text" id="range-start" size="10">
                    <span id="range-end-container">
                        &ndash;
                        <input type="text" id="range-end" size="10">
                    </span>
                    <p class="help">
                        Positions are expected to be represented according to the
                        <a href="http://www.hgvs.org/mutnomen/recs-DNA.html#number" target="_blank">HGVS nomenclature rules</a>.
                    </p>
                </div>

                <div class="form-row" id="sequence-container">
                    <label for="sequence" id="sequence-label">Sequence:</label>
                    <input type="text" id="sequence" size="20">
                </div>

                <div class="form-row" id="new-sequence-container">
                    <label for="new-sequence">New sequence:</label>
                    <input type="text" id="new-sequence" size="20">
                </div>

                <div class="form-row" id="preview-container">
                    <label>Preview:</label>
                    <span id="preview"></span>
                    <span id="validity"></span>
                </div>
            </fieldset>

            <div class="submit-row">
                <input type="submit" id="save" value="Save" class="default">
                <input type="button" id="close" value="Close">
            </div>
        </form>
    </body>
</html>
